import React, { Component } from 'react';
import './app.scss';
import './iconfont.css'
class App extends Component {
  getTotaPrice = (params) => {
    let totaPrice = 0;
    this.state.products.map(p => {
      if (p.checked) {
        totaPrice += p.num * p.price_new;
      }
    })
    return totaPrice;
  }
  getChioceNum = (params) => {
    let chice_num = 0;
    this.state.products.map(p => {
      if (p.checked) {
        chice_num += p.num
      }
    })
    return chice_num
  }
  changeChice = (e) => {
   /*  let products = this.state.products*/
   let {index} = e.currentTarget.dataset;
   let products = this.state.products;
   //全选
   let allChecked = true;
   products[index].checked = ! products[index].checked
  // console.log(index)
  //判断列表中的选项是否为true，有一个不是就返回false
   products.map(p=>{
     if(!p.checked){
       allChecked = false ;
     }
   })
  this.setState({
    products:products,
    allChecked
  })
  }
  Allchecked = (params) => {
    // let allChecked = true;
    let allChecked = !this.state.allChecked;
    let products = this.state.products;
    products.forEach((p)=>{
      //点击全选把遍历所有数据把chenccked都改为true
      p.checked = allChecked ;
    });
    this.setState((preState)=>{
      return{
        products:products,
        allChecked
      }
    }) 
    //console.log(1)
  }
  haderPayChecked=(params) => {
   return this.state.products.some(p=>{
     return p.checked
   })
  }
  state = {
    chice_num: 0,//已选商品数量
    totaPrice: 0,//商品总价
    allChecked:true,
    products: [
      {
        text_title: "啥也不是",
        price_new: 699,
        price_old: 999,
        num: 1,
        checked: true,
        skuid: 3456,
      },
      {
        text_title: "啥玩意",
        price_new: 699,
        price_old: 999,
        num: 1,
        checked: true,
        skuid: 3457,
      }
    ]
  }
  handSub = (index) => {
    // console.log("执行了一",index)
    let products = this.state.products;
    --products[index].num;
    this.setState({
      products: products,
    })
  }
  handAdd = (index) => {
    //console.log("执行了＋",index)
    //下面这个写法有待优化 不是最终版本
    let products = this.state.products;
    ++products[index].num;
    this.setState({
      products: products,
    })
  }
  render() {
    return (
      <>
        <div className="top">玩意演戏</div>
        <div className="mid">
          {/* 通过数据循坏生成模块 */}
          {
            this.state.products.map((p, index) => {
              return (
                <div className="inner" key={p.skuid}>
                  <div className="inner_left">
                    <i className={p.checked ? "iconfont icon-xuanzhong-2" : "iconfont icon-xuanzhongyuandian"}
                      data-index={index}
                      onClick={this.changeChice}
                    ></i>
                  </div>
                  <div className="inner_mid">
                    <img src="" alt="" />
                  </div>
                  <div className="inner_right">
                    <div className="text">{p.text_title}</div>
                    <div className="right_l">
                      ￥{p.price_new}
                    </div>
                    <div className="right_r">
                      <span className="sub iconfont icon-jian"
                        onClick={this.handSub.bind(this, index)}
                      ></span>
                      <span className="num">{p.num}</span>
                      <span className="add iconfont icon-jia"
                        onClick={this.handAdd.bind(this, index)}
                      ></span>
                    </div>
                  </div>
                </div>
              )
            })
          }
        </div>
        <div className="bottom">
          <div className="bottom_left "><i className={this.state.allChecked ? "iconfont icon-xuanzhong-2" : "iconfont icon-xuanzhongyuandian"}
          onClick={this.Allchecked}
          ></i>已选（{this.getChioceNum()}）</div>
          <div className="bottom_right">总计：￥{this.getTotaPrice()}</div>
          <div className={ this.haderPayChecked()?"pay":"discode"}>下单</div>
        </div>
      </>
    )
  }
}
export default App
